<template>
  <div class='containerArticle'>
    <el-card>
      <el-row>
        <el-col :span="22">
          <el-form :inline="true" :model="form" class="demo-form-inline">
            <el-form-item label="关键字">
              <el-input v-model="form.keyword" placeholder="审批人"></el-input>
            </el-form-item>
            <el-form-item label="状态">
              <el-select v-model="form.state" placeholder="活动区域">
                <el-option :value="1" label="启用"></el-option>
                <el-option :value="0" label="禁用"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item>
              <el-button @click="clear">清除</el-button>
              <el-button type="primary" @click="search">查询</el-button>
            </el-form-item>
          </el-form>
        </el-col>
        <el-col :span="2">
          <el-button type="success" icon="el-icon-info" @click="add">新增技巧</el-button>
        </el-col>
      </el-row>
      <el-alert
        :title="`数据一共${total}条`"
        type="info"
        :closable="false">
      </el-alert>
      <!-- 表格 -->
      <el-table
        :data="tableData"
        style="width: 100%">
        <el-table-column
          type="index"
          label="序号">
        </el-table-column>
        <el-table-column
          label="文章标题">
          <template #default="{row}">
            <span v-text="row.title"></span>
            <a @click="playVideo(row.videoURL)" href="#" v-if="row.videoURL" class="el-icon-film"></a>
          </template>
        </el-table-column>
        <el-table-column
          prop="visits"
          label="阅读数">
        </el-table-column>
        <el-table-column
          prop="username"
          label="录入人">
        </el-table-column>
        <el-table-column
          prop="createTime"
          label="录入时间">
          <template #default="{row}">{{row.createTime | parseTimeByString}}</template>
        </el-table-column>
        <el-table-column
          prop="state"
          label="状态">
          <template #default="{row}">
            {{status.find(item => item.value === row.state).label}}
          </template>
        </el-table-column>
        <el-table-column
          label="操作">
          <template #default="{row}">
            <el-link type="primary" @click="preview(row.id)">预览</el-link>&nbsp;&nbsp;
            <el-link type="primary" v-text="row.state===1?'禁用':'启用'" @click="changeState(row.id,row.state)"></el-link>&nbsp;&nbsp;
            <el-link type="primary" :disabled="row.state === 1" @click="edit(row.id)">修改</el-link>&nbsp;&nbsp;
            <el-link type="primary" :disabled="row.state === 1" @click="del(row.id)">删除</el-link>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :page-sizes="[10, 20, 30, 40]"
      :page-size="10"
      layout="sizes, prev, pager, next, jumper"
      :total="total">
    </el-pagination>
    <articles-add ref="articleAddRef" @reload="getArticlesList" :dialogFormVisible.sync="dialogFormVisible"></articles-add>
    <articles-preview :visiblePreview.sync="visiblePreview" :articleDetail="articleDetail"></articles-preview>
    <div class="video-preview" v-if="videoURL">
      <div class="close" @click="closeVideo()"><span class="el-icon-close"></span></div>
      <div class="box">
        <video ref="video" :src="videoURL"></video>
      </div>
    </div>
    </el-card>
  </div>
</template>

<script>
import { status } from '@/api/hmmm/constants.js'
import { list, detail, changeState, remove } from '@/api/hmmm/articles.js'
import articlesPreview from '../components/articles-preview.vue'
import ArticlesAdd from '../components/articles-add.vue'
export default {
  components: { articlesPreview, ArticlesAdd },
  data () {
    return {
      form: {
        keyword: null,
        state: null,
        page: 1,
        pagesize: 10
      },
      total: 0,
      tableData: [],
      status,
      articleDetail: {},
      visiblePreview: false,
      dialogFormVisible: false,
      videoURL: null
    }
  },
  created () {
    this.getArticlesList()
  },
  methods: {
    search () {
      this.getArticlesList()
    },
    clear () {
      this.form = {
        keyword: null,
        state: null,
        page: 1,
        pagesize: 10
      }
      this.getArticlesList()
    },
    async getArticlesList () {
      const { data } = await list(this.form)
      console.log(data)
      this.tableData = data.items
      this.total = data.counts
    },
    handleSizeChange (val) {
      console.log(`每页 ${val} 条`)
      this.form.pagesize = val
      this.getArticlesList()
    },
    handleCurrentChange (val) {
      console.log(`当前页: ${val}`)
      this.form.page = val
      this.getArticlesList()
    },
    // 预览
    async preview (id) {
      console.log(id)
      const { data } = await detail({ id })
      console.log(data)
      this.articleDetail = data
      this.visiblePreview = true
    },
    async changeState (id, state) {
      if (state === 1) {
        state = 0
      } else {
        state = 1
      }
      const res = await changeState({ id, state })
      console.log(res)
      this.getArticlesList()
    },
    del (id) {
      this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        const res = await remove({ id })
        console.log(res)
        this.$message({
          type: 'success',
          message: '删除成功!'
        })
        this.getArticlesList()
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    },
    add () {
      this.$refs.articleAddRef.title = '新增文章'
      this.dialogFormVisible = true
    },
    async edit (id) {
      const { data } = await detail({ id })
      console.log(data)
      this.$refs.articleAddRef.title = '修改文章'
      this.$refs.articleAddRef.form = data
      this.dialogFormVisible = true
    },
    playVideo (url) {
      this.videoURL = url
      this.$nextTick(() => {
        this.$refs.video.play()
      })
    },
    closeVideo () {
      this.$refs.video.pause()
      this.videoURL = null
    }
  }
}
</script>

<style scoped lang='scss'>
.containerArticle {
  margin: 20px;
  .el-icon-film{
    color: blue;
    font-size: 18px;
  }
}
.video-preview{
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,.3);
  overflow: hidden;
  z-index: 9999;
  .close{
    width: 50px;
    height: 50px;
    position: absolute;
    top: 30px;
    left: 50%;
    transform: translate(-50%,0);
    background: rgba(0,0,0,0.4);
    box-shadow: 0 0 5px rgba(0,0,0,0.4);
    border-radius: 50%;
    text-align: center;
    line-height: 50px;
    color: #fff;
    font-size: 20px;
  }
  .box{
    width: 800px;
    height: 600px;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
    video{
      width: 100%;
      height: 100%;
    }
  }
}
</style>
